<!DOCTYPE HTML>
<script src="../../resources/js-test.js"></script>
<style>
.box {
    position: absolute;
    top: 20px;
    left: 20px;
    height: 100px;
    width: 100px;
}

#outer {
    background-color: grey;
}

#inner {
    background-color: red;
}
</style>

<div id="outer" class="box">
  <div id="inner" class="box"></div>
</div>

<div id="console"></div>

<script>
description("Verifies that mouse events are not fired on deleted nodes (crbug.com/515921)");

function eventLogger(event) {
  if (event.eventPhase == Event.AT_TARGET)
    debug(event.currentTarget.id + " received " + event.type);
}

function init() {
  var outer = document.getElementById("outer");
  var inner = document.getElementById("inner");

  ["mouseenter", "mouseleave", "mouseover", "mouseout"].forEach(function(event){
    outer.addEventListener(event, eventLogger);
    inner.addEventListener(event, eventLogger);
  });

  outer.addEventListener("click", function () {
    outer.removeChild(inner);
    debug("removed inner");
  });
}

init();
if (window.eventSender) {
  eventSender.mouseMoveTo(30, 30);
  eventSender.mouseMoveTo(130, 130);
  eventSender.mouseDown();
  eventSender.mouseUp();
  debug("TODO(crbug.com/276329): We are missing a mouseout here!")
  debug("TODO(crbug.com/276329): We are missing a mouseleave here!")
  eventSender.mouseMoveTo(30, 30);
} else {
  debug("This test requires eventSender");
}
</script>
